<template>
  <div class="wrap">
    <!-- 信息卡 -->
    <el-row>
      <el-col :span="6" v-for="(item,index) in infoCardData" :key="index">
        <div class="info-card">
          <div class="card-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="card-content">
            <h3>{{item.name}}</h3>
            <p>{{item.data}}</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <HomeChart/>
        <!-- <div ref="chart" class="chart"></div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import HomeChart from "./components/HomeChart";
import * as echarts from 'echarts'




export default {
  components: {
    HomeChart
  },
  computed: {
    ...mapGetters("Home",["infoCardData"]),
  },
  methods: {
    ...mapActions("Home",["SYNC_UPDATE_HOME_DATA"])
  },
  created() {
    this.SYNC_UPDATE_HOME_DATA();
  },
  mounted() {
     console.log(process.env.VUE_APP_TEST);
  }
};
</script>

<style scoped lang="less">
.info-card {
  display: flex;
  width: auto;

  .card-icon {
    flex: 4;
    text-align: center;
    i {
      font-size: 60px;
    }
    .blue {
      color: blue;
    }
    .red {
      color: red;
    }
    .green {
      color: #34db34;
    }
  }

  .card-content {
    flex: 6;
    text-align: center;
  }
}
.chart {
  width: 100%;
  height: 300px;
}
</style>